<!-- 
  计算属性
    基于现有的数据，计算得到新数据；当现有的数据发生变化时，计算属性也会重新计算
-->
<script setup>
  import {ref, computed} from "vue"
  const goodList = ref([
    {id: 1, name: "篮球", isFinite: false, num: 4},
    {id: 2, name: "足球", isFinite: false, num: 2},
    {id: 3, name: "羽毛球", isFinite: false, num: 1},
    {id: 4, name: "排球", isFinite: false, num: 6},
    {id: 5, name: "乒乓球", isFinite: false, num: 3}
  ])    
  // 使用计算属性 计算所有道具总量
  const total = computed(() => {
    return goodList.value.reduce((prev, current) => {
      return prev + current.num
    }, 0)
  })
</script>

<template>
  <div>
    <table>
      <tr v-for="item in goodList" :key="item.id">
        <td>名称：{{ item.name }}</td>
        <td>数量：{{ item.num }}</td>
      </tr>
    </table>
    <p>{{ total }}</p>
  </div>
</template>

<style scoped>

</style>